<template>
    <div>
        <!-- 按钮 -->
        <div class="btns">
            <el-button type="primary" size="small" @click="toFormHandler">新增</el-button>
        </div>
        <!-- 表格 -->
        <div>
            <el-table :data="dataset" style="width: 100%">
                <el-table-column prop="id" label="序号" width="180"></el-table-column>
                <el-table-column prop="name" label="名字" width="180"></el-table-column>
                <el-table-column prop="description" label="描述" align="center"></el-table-column>
                <!-- 操作列 -->
                <el-table-column width="100" align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editHandler(scope.row)">修改</el-button>
                        <el-button type="text" @click="deleteHandler(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>   
        </div>
    </div>
</template>
<script>
import {del, get} from '@/utils/request'
export default {
    data(){
        return{
            dataset:[],
            visible:false
        }
    },
    methods:{
        // 删除处理函数
        deleteHandler(row){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url="http://localhost:8888/dataset/deleteById"
                del(url,{id:row.id}).then(resp=>{
                //   1.提示 
                   this.$message({type:"success",message:resp.message});
                //    2.刷新
                   this.loadDataset();
                })
            })
        },
        // 修改的处理函数
        editHandler(row){
            this.$router.push({
                path:"/qhx/datasetform",
                query:row
            })
        },
        // 跳转到添加页面
        toFormHandler(){
            this.$router.push({path:"/qhx/datasetform"})
        },
        // 查询目录
        loadDataset(){
            let url="http://localhost:8888/dataset/query";
            get(url).then(resp=>{
                this.dataset=resp.data;
            })
        }
    },
    created(){
        this.loadDataset();
    }
}
</script>
<style lang="sass" scoped>

</style>